<template>
  <div class="approval-history">
    <div v-loading="loading">
      <el-empty v-if="!loading && approvalHistory.length === 0" description="暂无审批记录" />
      
      <el-timeline v-else>
        <el-timeline-item
          v-for="(item, index) in approvalHistory"
          :key="index"
          :timestamp="item.approvalTime"
          :type="item.decision === 'approve' ? 'success' : 'danger'"
        >
          <h4>{{ item.nodeName }} - {{ item.approverName }} ({{ item.approverRole }})</h4>
          <p>
            决定: 
            <el-tag :type="item.decision === 'approve' ? 'success' : 'danger'">
              {{ item.decision === 'approve' ? '通过' : '拒绝' }}
            </el-tag>
          </p>
          <p>意见: {{ item.comment }}</p>
          <p v-if="item.approvedAmount">批准金额: {{ formatMoney(item.approvedAmount) }}</p>
          <p v-if="item.loanDate">放款日期: {{ item.loanDate }}</p>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { loanApprovalApi } from '@/api/loan'

const props = defineProps({
  loanId: {
    type: String,
    required: true
  }
})

const loading = ref(false)
const approvalHistory = ref([])

// 格式化金额
const formatMoney = (amount) => {
  return amount ? '¥' + amount.toLocaleString() : '¥0'
}

// 获取审批历史
const getApprovalHistory = async () => {
  try {
    loading.value = true
    const res = await loanApprovalApi.getHistory(props.loanId)
    if (res.code === 200) {
      approvalHistory.value = res.data
    } else {
      ElMessage.error(res.message || '获取审批历史失败')
    }
  } catch (error) {
    console.error('获取审批历史出错:', error)
    ElMessage.error('获取审批历史失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (props.loanId) {
    getApprovalHistory()
  }
})
</script>

<style scoped>
.approval-history {
  padding: 20px 0;
}

h4 {
  margin-bottom: 10px;
  font-weight: 500;
  color: #303133;
}

p {
  margin: 5px 0;
  color: #606266;
}
</style> 